<template>
  <div class="emoji-container">
    <div class="emoji-box">
      <span
              v-for="(items, index) in emoji"
              :key="index"
              @click="addEmoji(items.emoji)"
      >
          {{ items.emoji }}
        </span>
    </div>
  </div>
</template>

<script>
import emoji from '@/repeatComponents/emoji/emoji-list.js';
export default {
    name: 'Emoji',
    data() {
        return {
            emoji: emoji
        };
    },
    props: {
        dom: {
            type: [String, Number],
            default: ''
        }
    },
    methods: {
        addEmoji(str) {
            const area = document.getElementById(this.dom);
            if (document.selection) {
                area.focus();
                const sel = document.selection.createRange();
                sel.text = str;
                sel.select();
            } else if (area.selectionStart || area.selectionStart === '0') {
                const startPos = area.selectionStart;
                const endPos = area.selectionEnd;
                const restoreTop = area.scrollTop;
                area.innerHTML =
                    area.innerHTML.substring(0, startPos) +
                    str +
                    area.innerHTML.substring(endPos, area.innerHTML.length);
                if (restoreTop > 0) {
                    area.scrollTop = restoreTop;
                }
                area.focus();
                area.selectionStart = startPos + str.length;
                area.selectionEnd = startPos + str.length;
            } else {
                const selection = window.getSelection();
                if (
                    selection.anchorNode &&
                    selection.anchorNode.nodeType === 3 &&
                    selection.anchorNode.parentNode === area
                ) {
                    const range = selection.getRangeAt(0);
                    const rangeStartOffset = range.startOffset;
                    const textNode = range.startContainer;
                    if (!range.collapsed) {
                        range.deleteContents();
                    }
                    textNode.insertData(rangeStartOffset, str);
                    range.setStart(selection.anchorNode, rangeStartOffset + str.length);
                    range.collapse(true);
                    selection.removeAllRanges();
                    selection.addRange(range);
                } else {
                    area.innerHTML += str;
                    selection.selectAllChildren(area);
                    selection.collapseToEnd();
                }
            }
            this.$emit('valChange');
        },
        hide(event) {
            const e = window.event || event;
            if (e.target.className !== 'emoji-container') {
                this.$emit('emojiHide');
            }
        }
    }
};
</script>

<style scoped lang="less">
 .emoji-container {
   width: 90%;
   border: 1px solid #dfdfdf;
   .emoji-box {
     width: 100%;
     height: 150px;
     padding: 5px 10px;
     background: #fff;
     overflow-y: scroll;
     > span {
       display: inline-block;
       width: 10%;
       height: 10%;
       padding: 5px 0;
     }
   }
 }
</style>
